<!-- 声明文档类型 这个文档是html文档 声明文档类型可以是大写 也可以是小写，看个人习惯 -->
<!DOCTYPE html>

<html lang="en">

<head>
    <!-- meta用于描述文档比如文档的作者，文档的内容，文档是干啥的？还有来定义文档的关键词； -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <base target="_blank">
</head>

<body>
    <h1>表单</h1>
    <fieldset>
        <legend>组合表单标题</legend>
        <form action="">
            type="text" 是文本输入框；type="radio"是单选框；type="submit"是提交；
            <input type="text" name="" id="" value="这是一个输入框">
            <input type="radio">
            <input type="submit" name="" id=""><br>
            <p>你是男是女？</p>
            <input type="radio" name="sex" id="" value="男">男
            <input type="radio" name="sex" id="" value="女">女
        </form>
    </fieldset>

    <h1>html表单元素</h1>
    <p>你最喜欢吃什么水果？</p>
    <select name="" id="">
        <option value="榴莲">榴莲</option>
        <option value="苹果">苹果</option>
        <option value="波罗蜜" selected>波罗蜜</option>
    </select>

    <h1>文本域</h1>
    <form action="">
        <textarea name="message" id="" cols="30" rows="10"></textarea>
        <input type="submit" value="提交">
        <!-- 提交到哪里去了？ -->
    </form>

    <h1>html5 datalist </h1>

    <h1>表格</h1>
    <table>
        <caption>标题：动物分类</caption>
        <tr>
            <th>动物</th>
        </tr>
        <tr>
            <td>猫咪</td>

        </tr>
        <tr>
            <td>狗狗</td>
        </tr>

    </table>

    <h1>无序列表</h1>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

    <h1>块级元素和内联元素</h1>
    <!-- div是块级元素；
    span是内联元素； -->

    <h1>class类 块元素和行内元素</h1>
    <div class="cities">cities</div>
    <span class="red">red</span>

    <h1>使用html id进行书签的跳转</h1>
    <div> <a href="./index.html#last">点击跳转到最后一个</a></div>
    <div><a href="./index.html#twoLast">点击跳转到到倒数第二个</a></div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div id="twoLast">4</div>
    <div id="last">5</div>

    <h1>iframe 内联框架</h1>
    <iframe src="http://www.baidu.com" frameborder="0" width="100px" height="100px"></iframe>

    <h1>noscript 如果用户的浏览器不支持javascript 可以使用这个noscript元素</h1>
    <noscript>你的浏览器不支持javascript</noscript>

    <h1>头部元素</h1>
    使用base 可以让链接在新窗口打开
    <!-- <base target="_blank"> -->

    <h1>布局</h1>
    <!-- <div>
        <div id="header">
            <h1>定义文档或节的页眉</h1>
        </div>

        <div id="nav">定义导航链接的容器</div>
    </div> -->

    <h1>响应式布局</h1>
    <div>
        <div class="responsive"></div>
        <div class="responsive"></div>
        <div class="responsive"></div>
        <div class="responsive"></div>
        <div class="responsive"></div>
        <div class="responsive"></div>
        <div class="responsive"></div>
        <div class="responsive"></div>
        <div class="responsive"></div>
    </div>

    <h1>图像</h1>
    <!-- 最好给图像定义大小，因为浏览器在加载页面之前，会给图像预留一定的空间，为图像定义大小，可以减小闪烁，就是减小空白时间； -->

    <h1>注释太多，就需要分行写</h1>
    <!--
        dsf
        dfs
    -->

    <h1>字符实体 显示大于号，小于号，增加空格数量</h1><br>
    <p>&#60; &it; &it;</p>
    <p> &it; &it; &it; &nbsp;&nbsp;&nbsp;&nbsp;&gt; </p>

    <h1>小表情</h1>
    <p style="font-size: 100px;">&#128516; &#128525; &#128151; </p>




</body>

</html>